const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { assert } = require('console');

module.exports = {
    mode: 'none',
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js',
        assetModuleFilename: 'images/[hash][ext]'
    },

    plugins: [
        new webpack.ProvidePlugin({
            Vue: ['vue/dist/vue.esm.js', 'default'],
        }),
        new HtmlWebpackPlugin({
            template: './index.html'
        })],
    resolve: {
        extensions: [" .js", ".vue", ".json"],
        alias: {
            vue$: "vue/dist/vue.js"
        }
    },
    module: {
        rules: [
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    }
};